@mixin button() {
  font-weight: map-get($button, font-weight);
  line-height: map-get($base, line-height);
  outline: none;
  display: inline-block;
  cursor: pointer;
  text-decoration: none !important;
  @include user-select(none);
  @include transition(map-get($button, transition));
  svg {
    width: 1rem;
    height: 1rem;
    path {
      @include transition(map-get($button, transition));
    }
  }
  &.disabled,
  &:disabled {
    cursor: not-allowed;
    color: rgba($text-color-3, .2) !important;
    background-color: $main-color-3 !important;
    svg path {
      fill: rgba($text-color-3, .2) !important;
    }
  }
}

.button {
  @include button();
}

.button--primary {
  @include clickable($text-color-1, $main-color-1);
}

.button--secondary {
  @include clickable($text-color-3, $main-color-3);
}

.button--success {
  @include clickable($text-color-function, $green);
}

.button--info {
  @include clickable($text-color-function, $blue);
}

.button--warning {
  @include clickable($text-color-function, $yellow);
}

.button--error {
  @include clickable($text-color-function, $red);
}

.button--outline-primary {
  color: $main-color-1;
  border: 1px solid $main-color-1;
  @include clickable($main-color-1, transparent, $text-color-1, $main-color-1);
}

.button--outline-secondary {
  color: $main-color-3;
  border: 1px solid $main-color-3;
  @include clickable($main-color-3, transparent, $text-color-3, $main-color-3);
}

.button--outline-success {
  color: $green;
  border: 1px solid $green;
  @include clickable($green, transparent, $text-color-function, $green);
}

.button--outline-info {
  color: $blue;
  border: 1px solid $blue;
  @include clickable($blue, transparent, $text-color-function, $blue);
}

.button--outline-warning {
  color: $yellow;
  border: 1px solid $yellow;
  @include clickable($yellow, transparent, $text-color-function, $yellow);
}

.button--outline-error {
  color: $red;
  border: 1px solid $red;
  @include clickable($red, transparent, $text-color-function, $red);
}

.button--pill {
  border-radius: map-get($button, pill-radius);
  @extend .button--md;
}

.button--rounded {
  border-radius: map-get($base, border-radius);
  @extend .button--md;
}

.button--circle {
  @include flexbox();
  @include justify-content(center);
  @include align-items(center);
  border-radius: 50%;
  @extend .button--md;
}

.button--md {
  font-size: map-get($base, font-size);
  padding: map-get($button, padding-y) map-get($button, padding-x);
  &.button--circle {
    width: map-get($button, circle-diameter);
    height: map-get($button, circle-diameter);
  }
}

.button--sm {
  font-size: map-get($base, font-size-sm);
  padding: map-get($button, padding-y-sm) map-get($button, padding-x-sm);
  &.button--circle {
    width: map-get($button, circle-diameter-sm);
    height: map-get($button, circle-diameter-sm);
  }
}

.button--lg {
  font-size: map-get($base, font-size-lg);
  padding: map-get($button, padding-y-lg) map-get($button, padding-x-lg);
  &.button--circle {
    width: map-get($button, circle-diameter-lg);
    height: map-get($button, circle-diameter-lg);
  }
}